<template>
  <svg :class="className">
    <use :xlink:href="iconPath" :fill="color" />
  </svg>
</template>

<script>
export default {
  name: 'svg-icon',

  props: {
    name: {
      type: String,
      required: true
    },

    color: {
      type: String,
      default: '#fff'
    }
  },

  computed: {
    iconPath () {
      let icon = require(`@/assets/icons/${this.name}.svg`)
      if (Object.prototype.hasOwnProperty.call(icon, 'default')) {
        icon = icon.default
      }

      return icon.url
    },

    className () {
      return `icon icon-${this.name}`
    }
  }
}
</script>
